import { useRef, useState } from "react";
import { Tabs, Tab, Tooltip } from "@heroui/react";
import { Button } from "@heroui/react";
import { Resizable, ResizeDirection, NumberSize } from "re-resizable";

import TradingChartPeriod from "./trading-chart-period";
import TradingChartRealTime from "./trading-chart-realtime";

import { MyIcon } from "@/components/s-icons/icons";

export default function TradingView() {
  const [activePeriod, setActivePeriod] = useState<
    "realTime" | "daily" | "weekly" | "monthly"
  >("realTime");
  const [activeTool, setActiveTool] = useState<string>("自选");

  const toolsList = useRef([
    {
      value: "自选",
      icon: "icon-news",
      onClick: (toolValue: string) => {
        /**
         * 这里是异步的，所有不能简单的用 if去判断他们是否相等[activeTool,toolValue]
         * if (activeTool === toolValue)  return setActiveTool("");
         * setActiveTool(toolValue);
         */
        setActiveTool((prevTool) => (prevTool === toolValue ? "" : toolValue));
      },
    },
  ]);

  const [widthState, setWidthState] = useState<number>(320);

  const onResize = (
    _event: MouseEvent | TouchEvent,
    _direction: ResizeDirection,
    _elementRef: HTMLElement,
    _delta: NumberSize,
  ) => {};
  const onResizeStop = (
    _event: MouseEvent | TouchEvent,
    _direction: ResizeDirection,
    _elementRef: HTMLElement,
    delta: NumberSize,
  ) => {
    if (widthState + delta.width <= 200) {
      return setActiveTool("");
    }
    setWidthState(widthState + delta.width);
  };

  return (
    <div className="flex items-stretch h-full w-full ">
      {/* min-w-0 可以替代 overflow-hidden */}
      <div className="flex flex-col gap-1 flex-1 overflow-hidden">
        <div className="flex flex-col bg-background w-full h-full rounded-sm">
          {activePeriod !== "realTime" && (
            <TradingChartPeriod period={activePeriod} symbol="002101" />
          )}
          {activePeriod === "realTime" && (
            <TradingChartRealTime symbol="002101" />
          )}

          <div className="whitespace-nowrap hidden xs:flex border-t-1 border-solid border-bg2">
            <Tabs
              aria-label="Options"
              radius="none"
              selectedKey={activePeriod}
              variant="solid"
              onSelectionChange={(key) =>
                setActivePeriod(
                  key as "realTime" | "daily" | "weekly" | "monthly",
                )
              }
            >
              <Tab key="realTime" title="分时图" />
              <Tab key="daily" title="日K线" />
              <Tab key="weekly" title="周K线" />
              <Tab key="monthly" title="月K线" />
            </Tabs>
          </div>
        </div>
        {/* <div className="bg-background" /> */}
      </div>
      <div className="bg-background ml-1 hidden xs:flex rounded-sm">
        {activeTool && (
          <Resizable
            className="p-2"
            enable={{ left: true, right: false }}
            maxWidth={542}
            minWidth={200}
            size={{ width: widthState }}
            onResize={onResize}
            onResizeStop={onResizeStop}
          >
            Sample with default size{widthState}
          </Resizable>
        )}
        <div
          className={`${!activeTool && "rounded-sm"} p-1 rounded-tr-sm rounded-br-sm  flex flex-col gap-2 border-l-1 border-solid border-bg2`}
        >
          {toolsList.current.map((item, index) => (
            <Tooltip
              showArrow
              content={item.value}
              key={index}
              placement="left"
            >
              <Button
                isIconOnly
                className={`${activeTool === item.value ? "bg-bg2" : "bg-transparent"}  p-1 box-content hover:bg-bg2`}
                onPress={() => item.onClick(item.value)}
              >
                <MyIcon fontSize={32} name={item.icon} />
              </Button>
            </Tooltip>
          ))}
        </div>
      </div>
    </div>
  );
}
